<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<script src="./jquery-2.1.4/jquery.js"></script>
<title>注册页面</title>
<style type="text/css">
#div {
	background-color: aliceblue
}

#two {
	margin: 40px;
}

#a {
	margin-left: 95%;
}
</style>
<script>
	window.onload = function() {
		setInterval(function() {
			getDate();
		}, 1000);
	}
	function getDate() {
		var gettime = document.getElementById("div0");
		var date = new Date();
		var year = date.getFullYear();
		var month = date.getMonth();
		var data = date.getDate();
		var hours = date.getHours();
		var minute = date.getMinutes();
		var second = date.getSeconds();
		var time = year + '-' + f(month + 1) + '-' + f(data) + ' ' + f(hours)
				+ ':' + f(minute) + ':' + f(second);
		gettime.innerHTML = time;
	}

	function f(str) {
		var num;
		str >= 10 ? num = str : num = '0' + str;
		return num;
	}

	function Test() {
		var name = document.getElementById("name").value;
		var id = document.getElementById("id").value;
		var card = document.getElementById("card").value;
		var pwd = document.getElementById("pwd").value;
		var pwd1 = document.getElementById("pwd1").value;
		if (name.length == 0) {
			alert("姓名不能为空！");
			return;
		}
		if (id.length == 0) {
			alert("账号不能为空！");
			return;
		}
		if (card.length == 0) {
			alert("省份证不能为空！");
			return;
		}
		if (pwd.length == 0) {
			alert("密码不能为空！");
			return;
		} else if (pwd != pwd1) {
			alert("请确认两次输入的密码相同！");
			return;
		} else {
			document.getElementById("form").submit();
		}
	}
</script>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

</head>

<body>
	<div id="div0" style="margin-left: 90%"></div>
	<a href="./login.jsp" id="a">登陆</a>
	<div id="div">
		<h1 align="center">注册界面</h1>
		<form action="./login.jsp" id="form">
			<table>
				<tr>
					<td>
						<table style="margin-left: 500px; height: 100px;" border="0" cellspacing="0" align="center" id="one">
							<tr>
								<th align="right">姓名：</th>
								<td><input type="text" id="name" name="name" value placeholder="姓名"></td>

							</tr>
							<tr>
								<th align="right">账号：</th>
								<td><input type="text" id="id" name="id" value placeholder="账号"></td>

							</tr>
							<tr>
								<th align="right">身份证：</th>
								<td><input type="password" id="card" name="card" value placeholder="身份证"></td>

							</tr>
							<tr>
								<th align="right">密码：</th>
								<td><input type="password" id="pwd" name="pwd" value placeholder="密码"></td>

							</tr>
							<tr>
								<th align="right">确认密码：</th>
								<td><input type="password" id="pwd1" name="card" value placeholder="确认密码"></td>

							</tr>
						</table>
					</td>
					<td>
						<table style="margin-left: 10px; height: 140px; width: 300px;" border="0" cellspacing="0" id="two">
							<tr style="height: 20px;">
								<td style="color: crimson;" id=txt1-1>×请输入正确的姓名</td>
								<td style="color: chartreuse;" id=txt1-2>√</td>
							</tr>
							<tr style="height: 20px;">
								<td style="color: crimson;" id=txt2-1>×请输入正确的账号</td>
								<td style="color: chartreuse;" id=txt2-2>√</td>
							</tr>
							<tr style="height: 20px;">
								<td style="color: crimson;" id=txt3-1>×请输入正确的身份证</td>
								<td style="color: chartreuse;" id=txt3-2>√</td>
							</tr>
							<tr style="height: 20px;">
								<td style="color: crimson;" id=txt4-1>×请输入正确的密码</td>
								<td style="color: chartreuse;" id=txt4-2>√</td>
							</tr>
							<tr style="height: 20px;">
								<td style="color: crimson;" id=txt5-1>×请确认两次密码相同</td>
								<td style="color: chartreuse;" id=txt5-2>√</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
			<input align="center" style="margin-left: 600px; margin-top: 20px;" type="button" id="but1" value="注册" onclick="Test()">
			<input align="center" style="margin-left: 20px;" type="reset" id="but2" value="重置" onclick="clear()"><br>
		</form>
	</div>

	<script>
		$(function() {
			$("#txt1-1").hide();
		})
		$(function() {
			$("#txt1-2").hide();
		})
		$("#name").blur(function() {
			var name = document.getElementById("name").value;
			if(name.length == 0 || name.length > 10) {
				$(function() {
					$("#txt1-1").show();
				})
			} else {
				$(function() {
					$("#txt1-2").show();
				})
			}
		})
		$("#name").focus(function() {
			$(function() {
				$("#txt1-1").hide();
			})
			$(function() {
				$("#txt1-2").hide();
			})
		})
	</script>
	<script>
		$(function() {
			$("#txt2-1").hide();
		})
		$(function() {
			$("#txt2-2").hide();
		})
		$("#id").blur(function() {
			var id = document.getElementById("id").value;
			if(id.length == 0 || id.length > 10) {
				$(function() {
					$("#txt2-1").show();
				})
			} else {
				$(function() {
					$("#txt2-2").show();
				})
			}
		})
		$("#id").focus(function() {
			$(function() {
				$("#txt2-1").hide();
			})
			$(function() {
				$("#txt2-2").hide();
			})
		})
	</script>
	<script>
		$(function() {
			$("#txt3-1").hide();
		})
		$(function() {
			$("#txt3-2").hide();
		})
		$("#card").blur(function() {
			var card = document.getElementById("card").value;
			if(card.length == 0 || card.length > 18) {
				$(function() {
					$("#txt3-1").show();
				})
			} else {
				$(function() {
					$("#txt3-2").show();
				})
			}
		})
		$("#card").focus(function() {
			$(function() {
				$("#txt3-1").hide();
			})
			$(function() {
				$("#txt3-2").hide();
			})
		})
	</script>
	<script>
		$(function() {
			$("#txt4-1").hide();
		})
		$(function() {
			$("#txt4-2").hide();
		})
		$("#pwd").blur(function() {
			var pwd = document.getElementById("pwd").value;
			if(pwd.length == 0 || pwd.length > 10) {
				$(function() {
					$("#txt4-1").show();
				})
			} else {
				$(function() {
					$("#txt4-2").show();
				})
			}
		})
		$("#pwd").focus(function() {
			$(function() {
				$("#txt4-1").hide();
			})
			$(function() {
				$("#txt4-2").hide();
			})
		})
		$(function() {
			$("#txt5-1").hide();
		})
		$(function() {
			$("#txt5-2").hide();
		})
		$("#pwd1").blur(function() {
			var pwd = document.getElementById("pwd").value;
			var pwd1 = document.getElementById("pwd1").value;
			if(pwd != pwd1||pwd1==0) {
				$(function() {
					$("#txt5-1").show();
				})
			} else {
				$(function() {
					$("#txt5-2").show();
				})
			}
		})
		$("#pwd1").focus(function() {
			$(function() {
				$("#txt5-1").hide();
			})
			$(function() {
				$("#txt5-2").hide();
			})
		})
	</script>
</body>
</html>
